<!--
 * @Author: 宋杰
 * @Date: 2021-01-13 15:47:09
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-14 17:05:11
 * @Description: 一家十一口(猜一字) 按活动
-->
<template>
  <div class="div1">
    <div class="tabBox div2">
      <el-button
        type="primary"
        @click="tabClickA(1)"
        :class="tabClick == 1 ? 'tabBox2' : 'tabBox3'"
        plain
        class="tabBox1"
        >按机构</el-button
      >
      <el-button
        type="primary"
        @click="tabClickA(2)"
        :class="tabClick == 2 ? 'tabBox2' : 'tabBox3'"
        plain
        class="tabBox1"
        >按活动</el-button
      >
    </div>

    <!-- 头部搜索框 -->
    <div class="div2">
      <div class="topBox3">
        <div class="topBox3_sou">
          <!-- 机构名称 -->
          <div>
            <span>活动名称：</span>
            <el-input v-model="input" placeholder="活动名称"></el-input>
          </div>
          <el-button type="primary" class="sousuoBox">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- con -->
    <div class="div3">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="serialNumber" label="序号"> </el-table-column>
        <el-table-column prop="name" label="活动名称"> </el-table-column>
        <el-table-column prop="type" label="活动总分"> </el-table-column>
        <el-table-column prop="state" label="活动状态"> </el-table-column>
        <el-table-column prop="time" label="创建时间"> </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看明细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看详情弹窗 -->
      <el-dialog
        title="2020年度评估活动"
        :visible.sync="centerDialogVisible"
        width="50%"
        center
      >
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="机构名称">
            <el-input
              v-model="formInline.user"
              placeholder="机构名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit"
              ><i class="el-icon-search"></i> 查询</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          :data="EvaluationActivity"
          stripe
          style="width: 100%"
          height="250"
        >
          <el-table-column prop="serialNumber" label="序号"> </el-table-column>
          <el-table-column prop="name" label="机构名称"> </el-table-column>
          <el-table-column prop="type" label="当次活动评分"> </el-table-column>
          <el-table-column prop="time" label="参与时间"> </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="div4 div5">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="100"
            layout="total, prev, pager, next"
            :total="1000"
            background
          >
          </el-pagination>
        </div>
        <!-- 分页end -->
      </el-dialog>
      <!-- 查看详情弹窗 end -->
    </div>
    <!-- con end -->

    <!-- 分页 -->
    <div class="div4">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        background
      >
      </el-pagination>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      tabClick: 2,
      input: "",
      value: "1",

      tableData: [
        {
          serialNumber: "1",
          name: "2020年度评估活动",
          type: "98",
          time: "2020.9.7",
          state: "结束"
        },
        {
          serialNumber: "2",
          name: "2020年度评估活动",
          type: "95",
          time: "2020.8.6",
          state: "结束"
        },
        {
          serialNumber: "3",
          name: "2020年度中评估活动",
          type: "9",
          time: "2020.5.6",
          state: "结束"
        },
        {
          serialNumber: "4",
          name: "2020年度中评估活动",
          type: "1",
          time: "2020.7.6",
          state: "结束"
        },
        {
          serialNumber: "5",
          name: "2020年度抽查活动",
          type: "60",
          time: "2020.2.15",
          state: "结束"
        },
        {
          serialNumber: "6",
          name: "2020年度抽查活动",
          type: "100",
          time: "2020.2.10",
          state: "结束"
        }
      ],
      // 弹窗列表
      EvaluationActivity: [
        {
          serialNumber: "1",
          name: "新东方培训机构",
          type: "98",
          time: "2020.9.7"
        },
        {
          serialNumber: "2",
          name: "思而学",
          type: "95",
          time: "2020.8.6"
        },
        {
          serialNumber: "3",
          name: "优学教育",
          type: "90",
          time: "2020.5.6"
        },
        {
          serialNumber: "4",
          name: "尚德教育",
          type: "80",
          time: "2020.7.6"
        },
        {
          serialNumber: "5",
          name: "雅思教育",
          type: "70",
          time: "2020.7.6"
        },
        {
          serialNumber: "6",
          name: "火星教育",
          type: "68",
          time: "2020.7.6"
        }
      ],
      formInline: {
        user: "",
        region: ""
      },
      centerDialogVisible: false,
      currentPage1: 5
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    setTimeout(() => {}, 1000);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 查看
    handleClick(row) {
      // console.log(row);
      this.centerDialogVisible = true;
    },
    // 切换
    tabClickA(tab) {
      this.tabClick = tab;
      if (tab == 1) {
        this.$router.push(`CIInstitutions`); //机构
      } else {
        this.$router.push(`CIEvaluationactivity`); //评价
      }
    },
    onSubmit() {
      // console.log("submit!");
    }
  }
};
</script>
<style scoped>
.div1 {
  /* border: 1px solid #000; */
  background: #f5f6fa;
}

/* 头部搜索 */
.div2 {
  margin-bottom: 20px;
}
.div2,
.div3 {
  /* border: 1px solid rgb(18, 141, 241); */
  background: #fff;
  /* border-radius: 8px; */
  padding: 10px;
}

.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 49px;
}
/* 头部搜索 */
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.topBox3_sou >>> .el-input {
  width: 180px;
}
.topBox3_sou > :nth-child(1) {
  margin-right: 10px;
}
.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}
.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}
/* 头部搜索end */

/* 内容 */
.div3 >>> .el-table thead {
  color: rgb(75, 74, 74) !important;
}

/* 内容end */
/* 分页 */
.div4 {
  background: #fff;
  width: 100%;
}
.div4 > :nth-child(1) {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.div4 >>> .el-pagination__total {
  position: absolute;
  left: 5px;
}

/* 分页end */

/* 切换 */
.tabBox {
  display: flex;
  align-items: center;
}
.tabBox1 {
  padding: 8px 14px;
  background: #fff;
}
.tabBox2 {
  background: #409eff !important;
  color: #fff !important;
}
.tabBox3 {
  color: #409eff !important;
  background: #fff !important;
}

/* 弹窗 */
.div3 >>> .el-dialog {
  height: 75%;
  border-radius: 10px;
}
.div3 >>> .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 分页 */
.div5 {
  margin-top: 20px;
}
/* 弹窗 end */
</style>
